<template lang="html">
  <el-container class="content">
  <side-bar></side-bar>
  <div class="con-wrap" :class="{conCollapse: isCollapse}">
      <top-bar></top-bar>
      <router-view class="page-component-wrap animated fadeIn"></router-view>
  </div>
</el-container>
</template>

<script>
import {
  mapGetters,
  mapMutations
} from 'vuex'
import SideBar from '@/components/SideBar'
import TopBar from '@/components/TopBar'
import axios from 'axios'
import storage from '@/assets/js/storage'
export default {
  name:'index',
  data(){
    return {

    }
  },
  computed: {
    ...mapGetters({
      userInfo:'getUserInfo'
    }),
    isCollapse() {
      return this.$store.state.isCollapse;
    }
  },
  components: {
    'side-bar': SideBar,
    'top-bar': TopBar

  },
  methods:{
     ...mapMutations( ['changeUserInfo','changeAdmin','changeSuperAdmin']),
  },
  mounted(){
    storage.initUserInfo();
    if(!this.userInfo.token || !this.userInfo.username ){
      let userInfo =storage.getSession('login_userinfo')
      if(!userInfo){
        this.$message({
          showClose: true,
          message: '登录已失效，请重新打开应用',
          type: 'error'
        })
      }else {
        userInfo=JSON.parse(userInfo)
        this.changeUserInfo(userInfo)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.con-wrap {
  box-sizing: border-box;
  padding-left: 200px;
  transition: all 0.3s;
  width: 100%;
  box-sizing: border-box;
  h3 {
    margin-top: 0;
    color: #324157;
  }
  .page-component-wrap {
    padding: 10px;
  }
}
.con-wrap.conCollapse {
  padding-left: 64px;
  transition: all 0.3s;
}
</style>
